<script setup lang="ts"></script>

<template>
  <div class="col">
    <a-grid
      :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :col-gap="12"
      :row-gap="12"
    >
      <a-grid-item v-for="(item, index) in 1" :key="index" :index="index">
        <a-card
          :class="['card-item', index % 2 === 0 ? 'green-card' : 'red-card']"
          title="药管家智能药柜A1"
        >
          <template #extra>
            <a-badge v-if="index % 2 === 0" status="success" text="正常" />
            <a-badge v-else status="danger" text="异常" />
          </template>
          <div class="flex flex-col">
            <span>
              <span class="title">管理编号：</span>
              <span class="value">ZRDMO123123</span>
            </span>
          </div>
        </a-card>
      </a-grid-item>
    </a-grid>
  </div>
</template>

<style lang="less" scoped>
  .green-card {
    border-color: rgb(var(--green-3));
    box-shadow: 0 1px 3px 0 rgb(var(--green-1)),
      0 1px 2px -1px rgb(var(--green-1));
  }

  .red-card {
    border-color: rgb(var(--red-3));
    box-shadow: 0 1px 3px 0 rgb(var(--red-1)), 0 1px 2px -1px rgb(var(--red-1));
  }
</style>
